<template>
  <div>
    <el-form size="mini" inline>
      <el-form-item>
        <el-date-picker
          v-model="formData.operation_date"
          type="daterange"
          range-separator="至"
          value-format="yyyy-MM-dd"
          :clearable="false"
          style="width: 250px"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button @click="loadData" type="primary">搜索</el-button>
        <el-button @click="exportData" type="danger">导出</el-button>
      </el-form-item>
    </el-form>
    <div class="data-table">
      <table v-loading="loading">
        <thead>
        <tr>
          <th>店铺</th>
          <th>单量</th>
          <th>件数</th>
          <th>真实出单单量</th>
          <th>真实出单件数</th>
          <th>刷单单数</th>
          <th>发货件数</th>
          <th>发货单数</th>
          <th>访客数</th>
          <th>手淘搜索访客</th>
          <th>手淘首页访客</th>
          <th>拍立淘访客</th>
          <th>收藏件数</th>
          <th>加购件数</th>
          <th>收藏率</th>
          <th>加购率</th>
          <th>手淘搜索占比</th>
          <th>手淘首页占比</th>
          <th>拍立淘访客占比</th>
          <th>刷单出单比例</th>
          <th>刷单发货比例</th>
          <th>发货比例</th>
        </tr>
        </thead>
        <tbody>
        <tr v-for="(item,itemIndex) in dataList" :key="itemIndex">
          <td>{{ item.store_title }}</td>
          <td>{{ item.total_order_count }}</td>
          <td>{{ item.total_unit_count }}</td>
          <td>{{ item.total_real_order_count }}</td>
          <td>{{ item.total_real_unit_count }}</td>
          <td>{{ item.total_click_farm_count }}</td>
          <td>{{ item.total_send_unit_count }}</td>
          <td>{{ item.total_send_order_count }}</td>
          <td>{{ item.total_visitor_count }}</td>
          <td>{{ item.total_phone_visitor_count }}</td>
          <td>{{ item.total_home_visitor_count }}</td>
          <td>{{ item.total_up_down_count }}</td>
          <td>{{ item.total_collection_count }}</td>
          <td>{{ item.total_shop_cart_count }}</td>
          <td>{{ item.collection_rate }}%</td>
          <td>{{ item.shop_cart_rate }}%</td>
          <td>{{ item.phone_visitor_rate }}%</td>
          <td>{{ item.home_visitor_rate }}%</td>
          <td>{{ item.up_down_rate }}%</td>
          <td>{{ item.click_farm_rate }}%</td>
          <td>{{ item.click_farm_send_rate }}%</td>
          <td>{{ item.send_rate }}%</td>
        </tr>
        </tbody>
      </table>
      <el-empty v-if="!dataList.length && !loading">

      </el-empty>
    </div>
    <loading-dialog v-model="isExporting" loading-text="正在导出，请稍等"/>
  </div>
</template>

<script>
import moment from 'moment'
import { dicApi } from '@/feature/sys/infra/api/dicApi'
import SysDicTypeEnum from '@/feature/sys/infra/constants/SysDicTypeEnum'
import CompetingStoreBloggerApi from '@/infra/api/mct/CompetingStoreBloggerApi'
import StoreOperationApi from '@/infra/api/mct/StoreOperationApi'
import { complainFollowUpApi } from '@/feature/cmt/infra/api/complainFollowUpApi'
import ExcelUtil from '@/framework/infra/excel/ExcelUtil'
import LoadingDialog from '@/framework/components/dialog/LoadingDialog'

export default {
  name: 'StoreNew',
  components: { LoadingDialog },
  data() {
    return {
      isExporting: false,
      channelList: [],
      loading: true,
      formData: {
        operation_date: [
          moment().startOf('month').format('YYYY-MM-DD'),
          moment().format('YYYY-MM-DD')
        ]
      },
      dataList: []
    }
  },
  created() {
    this.loadChannelList().then(() => {
      this.loadData()
    })
  },
  methods: {
    loadChannelList() {
      return dicApi.allOptions(SysDicTypeEnum.CHANNEL.id).then(data => {
        data.push({
          value: '',
          label: '其他'
        })
        this.channelList = data
      })
    },
    loadData() {
      this.loading = true
      StoreOperationApi.storeOperationReport(this.formData).then(res => {
        this.dataList = res
      }).finally(() => {
        this.loading = false
      })
    },
    exportData() {
      this.isExporting = true
      StoreOperationApi.storeOperationReport(this.formData).then(data => {
        const header = ['店铺名', '总单量', '总件数', '真实出单总单量', '真实出单总件数', '刷单总单数', '发货总件数',
          '发货总单数', '访客总数', '手淘搜索访客总数', '手淘首页访客总数', '拍立淘访客总数', '收藏件数总数', '加购件数总数', '收藏率',
          '加购率', '手淘搜索访客占比', '手淘首页访客占比', '拍立淘访客占比', '刷单出单比例', '刷单发货比例', '发货比例']
        const exportedData = []
        if (data && data.length) {
          for (const row of data) {
            exportedData.push([
              row.store_title,
              row.total_order_count,
              row.total_unit_count,
              row.total_real_order_count,
              row.total_real_unit_count,
              row.total_click_farm_count,
              row.total_send_unit_count,
              row.total_send_order_count,
              row.total_visitor_count,
              row.total_phone_visitor_count,
              row.total_home_visitor_count,
              row.total_up_down_count,
              row.total_collection_count,
              row.total_shop_cart_count,
              row.collection_rate + '%',
              row.shop_cart_rate + '%',
              row.phone_visitor_rate + '%',
              row.home_visitor_rate + '%',
              row.up_down_rate + '%',
              row.click_farm_rate + '%',
              row.click_farm_send_rate + '%',
              row.send_rate + '%'
            ])
          }
        }
        ExcelUtil.exportTable({
          header,
          data: exportedData,
          filename: '店铺运营报表'
        })
      }).finally(() => {
        this.isExporting = false
      })
    }
  }
}
</script>

<style scoped>
.data-table {
  padding-bottom: 100px;
  overflow-x: auto;
  table-layout: fixed;
  white-space: nowrap;
}
</style>
